<div id="slideshow<?php echo $module; ?>" class="swiper-slideshow swiper-box module-bottom  swiper-container">
  <div class="swiper-wrapper">
    <?php foreach ($banners as $banner) { ?>
      <div class="swiper-slide">
        <?php if ($banner['link']) { ?>
        <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
        <?php } else { ?>
        <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
        <?php } ?>
      </div>
    <?php } ?>
  </div>
  <div class="swiper-pagination swiper-pagination-black"></div>
  <div class="swiper-button-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
  <div class="swiper-button-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
</div>

<script>
  $(document).ready(function() {
    var module_slideshow_swiper<?php echo $module; ?> = new Swiper('#slideshow<?php echo $module; ?>', {
      pagination: {el: '.swiper-pagination'},
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      speed: 100,
      loop: true,
      autoplayDisableOnInteraction: false,
      effect: 'fade'
    });

    $('#slideshow<?php echo $module; ?>').hover(function() {
      module_slideshow_swiper<?php echo $module; ?>.autoplay.stop();
    }, function() {
      module_slideshow_swiper<?php echo $module; ?>.autoplay.start();
    });
  });
</script>
